<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2026年运咨询 - 三位一体</title>
    
    <!-- 1. 样式库 Tailwind CSS -->
    <!-- 注意：Tailwind 脚本在国内有时也会稍慢，但通常能接受。如果依然卡顿，是这个脚本的原因，但在单文件中很难完全替换 -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- 2. 国内加速源：React 核心库 (换成了 Staticfile 源) -->
    <script crossorigin src="https://cdn.staticfile.org/react/18.2.0/umd/react.production.min.js"></script>
    <script crossorigin src="https://cdn.staticfile.org/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
    
    <!-- 3. 国内加速源：Babel 编译器 (换成了 Staticfile 源) -->
    <script src="https://cdn.staticfile.org/babel-standalone/7.23.5/babel.min.js"></script>

    <!-- 定义自定义动画和样式 -->
    <style>
        body { font-family: system-ui, -apple-system, sans-serif; }
        .ease-spring { transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        .select-all { user-select: all; -webkit-user-select: all; } /* 允许一键全选微信号 */
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        .animate-float { animation: float 4s ease-in-out infinite; }

        @keyframes fade-in-up {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade-in-up { animation: fade-in-up 0.8s ease-out forwards; }

        @keyframes scan {
            0% { top: 0; opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { top: 100%; opacity: 0; }
        }
        .animate-scan { animation: scan 2s ease-in-out infinite; }
        
        /* 隐藏滚动条但保留功能 */
        ::-webkit-scrollbar { width: 0px; background: transparent; }
    </style>
</head>
<body class="bg-[#FDFBF7]">

    <!-- React 应用挂载点 -->
    <div id="root"></div>

    <script type="text/babel">
        // --- 图标组件定义 (替代 lucide-react 库，确保单文件运行) ---
        const Icons = {
            Sparkles: (props) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/></svg>,
            ArrowDown: (props) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>,
            ChevronRight: (props) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}><path d="m9 18 6-6-6-6"/></svg>,
            CheckCircle: (props) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg>,
            Calendar: (props) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>,
            Compass: (props) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}><circle cx="12" cy="12" r="10"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/></svg>,
            Layers: (props) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}><path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"/><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"/><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"/></svg>,
            ScanLine: (props) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/></svg>,
            MessageCircle: (props) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}><path d="m3 21 1.9-5.7a8.5 8.5 0 1 1 3.8 3.8z"/></svg>
        };

        // --- 主组件 ---
        const AnnualFortune2026 = () => {
            const [activeTab, setActiveTab] = React.useState('tarot');
            const [scrolled, setScrolled] = React.useState(0);
            const qrRef = React.useRef(null);

            // =========================================================================
            // 🔴🔴🔴 粘贴区域开始 🔴🔴🔴
            // 请把您刚才复制的“第一段”长代码粘贴在下面这个双引号里面
            // =========================================================================
            const myQrCodeBase64 = ""; 
            // 🔴🔴🔴 粘贴区域结束 🔴🔴🔴

            React.useEffect(() => {
                const handleScroll = () => {
                    setScrolled(window.scrollY);
                };
                window.addEventListener('scroll', handleScroll);
                return () => window.removeEventListener('scroll', handleScroll);
            }, []);

            const methods = {
                tarot: {
                    id: 'tarot',
                    icon: <Icons.Layers className="w-6 h-6" />,
                    title: "塔罗 · 月度战术",
                    subtitle: "从年度战略落到月度战术",
                    color: "bg-rose-100 text-rose-800",
                    accent: "border-rose-400",
                    desc: "塔罗十二个月度牌阵：每月一张牌，明确每个月的重点、情绪、事件倾向、最佳行动点。",
                    hook: "明年的每一个月，你该攻还是该守？情绪雷点在哪里？",
                    detail: "就像你的私人GPS导航，不仅告诉你目的地，还告诉你前面路口该左转还是右转。精准捕捉每月的情绪波动与机遇窗口。",
                },
                yishu: {
                    id: 'yishu',
                    icon: <Icons.Compass className="w-6 h-6" />,
                    title: "梅花易数 · 年度宏观",
                    subtitle: "定调全年的核心主题",
                    color: "bg-emerald-100 text-emerald-800",
                    accent: "border-emerald-400",
                    desc: "梅花易数的年卦，提供是全年主题：趋势变化、核心矛盾、全年关键点——宏观、清晰、可作为年度运势基调。",
                    hook: "2026年的大环境对你有利吗？核心矛盾点会爆发在哪里？",
                    detail: "这就像是看天气预报。明年是该带伞（防守）还是该穿短袖（进攻）？通过年卦，一眼看穿全年运势的起承转合。",
                },
                bazi: {
                    id: 'bazi',
                    icon: <Icons.Calendar className="w-6 h-6" />,
                    title: "八字 · 命运齿轮",
                    subtitle: "分析流年在命运中的作用",
                    color: "bg-amber-100 text-amber-900",
                    accent: "border-amber-400",
                    desc: "根据个人八字命局分析流年的主线，分析在命运齿轮中的作用。在哪些领域的事务比较明显，例如：专业，婚运，创业，财富，健康等。",
                    hook: "明年会发财吗？正缘会出现吗？事业会有转机吗？",
                    detail: "这是你的底层代码。八字流年揭示了你生命蓝图中2026年的“必修课”。无论是财富还是感情，带你通过命理视角看清本质。",
                }
            };

            const scrollToBooking = () => {
                qrRef.current?.scrollIntoView({ behavior: 'smooth' });
            };

            return (
                <div className="min-h-screen font-sans text-slate-800 selection:bg-orange-200 overflow-x-hidden pb-24">
                    {/* 顶部进度条 */}
                    <div className="fixed top-0 left-0 h-1 bg-gradient-to-r from-orange-400 to-red-500 z-50 transition-all duration-300" style={{ width: `${Math.min((scrolled / 2000) * 100, 100)}%` }}></div>

                    {/* Hero Section */}
                    <section className="relative pt-12 pb-20 px-6 flex flex-col items-center justify-center min-h-[85vh]">
                        <div className="absolute top-[-10%] right-[-20%] w-64 h-64 bg-orange-100 rounded-full blur-3xl opacity-60 animate-pulse"></div>
                        <div className="absolute bottom-[10%] left-[-10%] w-48 h-48 bg-rose-100 rounded-full blur-3xl opacity-60"></div>

                        <div className="z-10 text-center space-y-6 animate-fade-in-up">
                            {/* 修改点1：年份修正 */}
                            <div className="inline-block px-4 py-1.5 rounded-full bg-orange-50 border border-orange-200 text-orange-800 text-xs font-semibold tracking-wider mb-2 shadow-sm">
                                ✨ 2026 丙午马年 · 提前布局
                            </div>
                            
                            <h1 className="text-4xl md:text-5xl font-serif font-bold text-slate-900 leading-tight">
                                2026 <span className="text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-red-600">三位一体</span><br />
                                年运解析
                            </h1>
                            
                            <p className="text-slate-500 text-lg md:text-xl max-w-xs mx-auto leading-relaxed">
                                告别迷茫与焦虑<br/>
                                掌握这一年的<span className="font-bold text-slate-800">“天时、地利、人和”</span>
                            </p>

                            <div className="py-8 relative h-24 w-full max-w-sm mx-auto">
                                <FloatingTag text="明年能暴富吗？💰" top="0%" left="5%" delay="0s" />
                                <FloatingTag text="会遇到正缘吗？❤️" top="40%" right="0%" delay="1.5s" />
                                <FloatingTag text="适合跳槽吗？🚀" bottom="0%" left="20%" delay="3s" />
                            </div>

                            {/* 修改点2：取消跳转，改为纯视觉引导，图标换成向下箭头 */}
                            <div 
                                className="mt-8 px-8 py-4 bg-slate-900 text-white rounded-2xl shadow-xl shadow-slate-200/50 flex items-center gap-2 mx-auto font-medium animate-bounce cursor-default"
                            >
                                下滑开启我的2026好运 <Icons.ArrowDown size={18} />
                            </div>
                        </div>

                        {/* 这个原本在底部的跳动箭头也可以保留作为双重提示，或者为了不重复可以隐藏。这里保留以增加活力 */}
                        <div className="absolute bottom-8 animate-bounce text-slate-400 opacity-50">
                            <Icons.ArrowDown size={24} />
                        </div>
                    </section>

                    {/* 核心内容区 */}
                    <section className="py-16 px-5 bg-white rounded-t-[40px] shadow-[0_-20px_40px_rgba(0,0,0,0.03)] -mt-10 relative z-20">
                        <div className="max-w-md mx-auto">
                            <h2 className="text-2xl font-bold text-center mb-2">为什么需要“三位一体”？</h2>
                            <p className="text-center text-slate-500 text-sm mb-10">单一视角总有盲区，全维视角才能掌控全局</p>

                            <div className="flex justify-between bg-slate-50 p-1.5 rounded-2xl mb-8 relative">
                                <div 
                                    className={`absolute top-1.5 bottom-1.5 w-[31%] bg-white rounded-xl shadow-sm transition-all duration-300 ease-spring`}
                                    style={{ 
                                        left: activeTab === 'tarot' ? '1.5%' : activeTab === 'yishu' ? '34.5%' : '67.5%' 
                                    }}
                                />
                                {Object.values(methods).map((m) => (
                                    <button
                                        key={m.id}
                                        onClick={() => setActiveTab(m.id)}
                                        className={`relative z-10 flex-1 py-3 text-sm font-medium rounded-xl transition-colors duration-200 flex flex-col items-center gap-1 ${activeTab === m.id ? 'text-slate-900' : 'text-slate-400'}`}
                                    >
                                        {m.icon}
                                        <span>{m.id === 'tarot' ? '塔罗' : m.id === 'yishu' ? '易经' : '八字'}</span>
                                    </button>
                                ))}
                            </div>

                            <div className="relative min-h-[420px]">
                                {Object.values(methods).map((m) => (
                                    <div 
                                        key={m.id}
                                        className={`absolute top-0 left-0 w-full transition-all duration-500 ease-in-out transform ${
                                            activeTab === m.id 
                                                ? 'opacity-100 translate-x-0 scale-100' 
                                                : 'opacity-0 translate-x-10 scale-95 pointer-events-none'
                                        }`}
                                    >
                                        <div className={`rounded-3xl p-6 border-2 ${m.accent} ${m.color} bg-opacity-30 shadow-lg relative overflow-hidden`}>
                                            <div className="absolute top-0 right-0 p-4 opacity-10">
                                                {m.icon}
                                            </div>
                                            <h3 className="text-xl font-bold mb-1 flex items-center gap-2">
                                                {m.title}
                                            </h3>
                                            <p className="text-xs opacity-70 font-mono uppercase tracking-widest mb-6">Strategy & Fate</p>
                                            <div className="bg-white/60 backdrop-blur-sm rounded-xl p-4 mb-4">
                                                <p className="font-bold text-slate-800 mb-2 text-sm">💡 核心解答：</p>
                                                <p className="text-slate-700 italic font-medium">"{m.hook}"</p>
                                            </div>
                                            <div className="space-y-4">
                                                <div>
                                                    <h4 className="font-bold text-sm mb-1 opacity-90">解析内容：</h4>
                                                    <p className="text-sm leading-relaxed opacity-90 text-justify">
                                                        {m.desc}
                                                    </p>
                                                </div>
                                                <div className="h-px w-full bg-current opacity-20 my-2"></div>
                                                <div>
                                                    <h4 className="font-bold text-sm mb-1 opacity-90">为什么选它：</h4>
                                                    <p className="text-sm leading-relaxed opacity-90 text-justify">
                                                        {m.detail}
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </section>

                    {/* 价格区域 */}
                    <section className="py-16 px-6 bg-slate-900 text-white relative overflow-hidden">
                        <div className="absolute inset-0 opacity-20 bg-[url('https://www.transparenttextures.com/patterns/stardust.png')]"></div>
                        <div className="max-w-md mx-auto relative z-10 text-center">
                            <h2 className="text-2xl font-serif mb-8 text-orange-100">超值综合咨询方案</h2>
                            <div className="bg-white/10 backdrop-blur-md border border-white/20 rounded-3xl p-6 relative">
                                <div className="absolute -top-4 -right-4 bg-red-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-lg animate-bounce">
                                    限时特惠
                                </div>
                                <div className="flex justify-center items-baseline gap-2 mb-2">
                                    <span className="text-sm text-slate-300 line-through">原价 ¥1500</span>
                                </div>
                                <div className="flex justify-center items-end gap-1 mb-6">
                                    <span className="text-2xl font-light text-orange-200">¥</span>
                                    <span className="text-6xl font-bold text-white tracking-tighter">598</span>
                                    <span className="text-sm text-orange-200 mb-2">/次</span>
                                </div>
                                <div className="space-y-3 text-left">
                                    <PriceItem name="塔罗年运" price="598" included={true} />
                                    <PriceItem name="梅花易数" price="198" included={true} />
                                    <PriceItem name="八字流年" price="598" included={true} />
                                </div>
                                <div className="mt-6 pt-6 border-t border-white/10 text-xs text-slate-300 leading-relaxed">
                                    <p>一次咨询，三重验证。</p>
                                    <p>从宏观趋势到微观执行，全方位保驾护航。</p>
                                </div>
                            </div>
                        </div>
                    </section>

                    {/* 预约步骤 */}
                    <section id="booking-section" className="py-20 px-6">
                        <div className="max-w-md mx-auto">
                            <h2 className="text-2xl font-bold text-center mb-10 text-slate-800">
                                仅需三步，预见未来
                            </h2>
                            <div className="space-y-8 relative pl-4">
                                <div className="absolute left-[19px] top-4 bottom-4 w-0.5 bg-slate-200"></div>
                                <StepItem number="1" title="锁定名额" desc="扫描下方二维码，添加微信预约咨询时间。" />
                                <StepItem number="2" title="提供信息" desc="发送出生年月日时（八字用）及当前困惑。" />
                                <StepItem number="3" title="获取报告" desc="一对一深度语音/文字解析，获得专属2026攻略。" />
                            </div>
                        </div>
                    </section>

                    {/* 底部二维码区域 */}
                    <section ref={qrRef} className="pb-32 px-6">
                        <div className="max-w-sm mx-auto bg-white rounded-3xl p-8 shadow-2xl shadow-orange-100/50 border border-orange-100 text-center relative overflow-hidden">
                            <div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-orange-400 to-rose-500"></div>
                            
                            <h3 className="text-xl font-bold text-slate-800 mb-2">立即预约咨询</h3>
                            <p className="text-base text-slate-800 mb-6 font-bold bg-orange-50/50 py-1 rounded-lg">
                                截图保存二维码，在微信中扫码
                            </p>
                            
                            <div className="relative w-48 h-48 mx-auto bg-slate-100 rounded-xl p-2 mb-6 group cursor-pointer overflow-hidden">
                                <div className="w-full h-full bg-white rounded-lg flex items-center justify-center overflow-hidden relative">
                                    
                                    {myQrCodeBase64 ? (
                                        <img 
                                            src={myQrCodeBase64}
                                            alt="微信二维码" 
                                            className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
                                        />
                                    ) : (
                                        <div className="w-full h-full relative grid grid-cols-6 grid-rows-6 gap-0.5 p-2 bg-slate-50">
                                            {[...Array(36)].map((_, i) => (
                                                <div 
                                                    key={i} 
                                                    className={`
                                                        rounded-[1px] 
                                                        ${[0,5,30,35].includes(i) ? 'bg-slate-800' : 'bg-slate-300'} 
                                                        ${[7,8,9,10,13,14,15,16].includes(i) ? 'bg-slate-800/80' : ''}
                                                        ${Math.random() > 0.5 ? 'opacity-80' : 'opacity-20'}
                                                        transition-opacity duration-1000
                                                    `}
                                                    style={{ animationDelay: `${i * 0.05}s` }}
                                                ></div>
                                            ))}
                                            
                                            <div className="absolute inset-0 flex flex-col items-center justify-center bg-white/90 backdrop-blur-sm p-4 text-center">
                                                <div className="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mb-2 animate-bounce">
                                                    <Icons.MessageCircle className="w-6 h-6 text-green-600" />
                                                </div>
                                                <p className="text-[10px] text-slate-400 font-mono leading-tight">
                                                    请植入Base64<br/>
                                                </p>
                                            </div>

                                            <div className="absolute top-1 left-1 w-8 h-8 border-4 border-slate-800 rounded-sm"></div>
                                            <div className="absolute top-1 right-1 w-8 h-8 border-4 border-slate-800 rounded-sm"></div>
                                            <div className="absolute bottom-1 left-1 w-8 h-8 border-4 border-slate-800 rounded-sm"></div>
                                        </div>
                                    )}

                                </div>
                                
                                <div className="absolute inset-0 border-2 border-orange-400/50 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                                <div className="absolute top-0 left-0 w-full h-0.5 bg-gradient-to-r from-transparent via-orange-500 to-transparent shadow-[0_0_15px_rgba(249,115,22,0.8)] animate-scan opacity-60"></div>
                            </div>

                            <div className="flex items-center justify-center gap-2 text-xs text-slate-400 bg-slate-50 py-2 rounded-lg mb-6">
                                <Icons.ScanLine size={14} />
                                <span>微信扫一扫 · 开启好运</span>
                            </div>

                            <div className="inline-block bg-orange-100 border border-orange-200 rounded-full px-5 py-3 shadow-sm animate-pulse">
                                <p className="text-sm text-orange-900 font-semibold">
                                    或添加微信号：<br/><span className="text-lg font-bold select-all">hengyun31</span>
                                </p>
                            </div>
                        </div>
                    </section>

                    {/* 底部悬浮 CTA */}
                    <div className="fixed bottom-0 left-0 right-0 p-4 bg-white/80 backdrop-blur-lg border-t border-slate-100 z-40">
                        <div className="max-w-md mx-auto flex gap-3">
                            <button 
                                onClick={scrollToBooking}
                                className="flex-1 bg-gradient-to-r from-slate-800 to-slate-900 text-white font-bold py-4 rounded-xl shadow-lg hover:shadow-xl transition-all active:scale-[0.98] flex items-center justify-center gap-2 group"
                            >
                                <Icons.Sparkles className="w-5 h-5 text-yellow-300 group-hover:rotate-12 transition-transform" />
                                立即预约 ¥598
                            </button>
                        </div>
                    </div>
                </div>
            );
        };

        // --- 辅助组件 ---
        const FloatingTag = ({ text, top, left, right, bottom, delay }) => (
            <div 
                className="absolute bg-white/80 backdrop-blur shadow-sm border border-slate-100 px-4 py-2 rounded-full text-sm font-medium text-slate-700 animate-float"
                style={{ top, left, right, bottom, animationDelay: delay }}
            >
                {text}
            </div>
        );

        const PriceItem = ({ name, price, included }) => (
            <div className="flex justify-between items-center py-2 border-b border-white/5 last:border-0">
                <div className="flex items-center gap-2">
                    {included ? <Icons.CheckCircle className="w-4 h-4 text-green-400" /> : <div className="w-4 h-4 rounded-full border border-slate-500"/>}
                    <span className={included ? "text-white" : "text-slate-400"}>{name}</span>
                </div>
                <div className="flex items-center gap-2">
                    <span className="text-xs text-slate-400 line-through">¥{price}</span>
                    {included && <span className="text-xs bg-orange-500/20 text-orange-200 px-1.5 py-0.5 rounded">包含</span>}
                </div>
            </div>
        );

        const StepItem = ({ number, title, desc }) => (
            <div className="relative flex gap-5 items-start">
                <div className="relative z-10 w-8 h-8 rounded-full bg-slate-900 text-white flex items-center justify-center font-bold text-sm shrink-0 shadow-lg ring-4 ring-[#FDFBF7]">
                    {number}
                </div>
                <div className="pt-1">
                    <h3 className="font-bold text-slate-800 text-lg mb-1">{title}</h3>
                    <p className="text-slate-500 text-sm leading-relaxed">{desc}</p>
                </div>
            </div>
        );

        // 渲染应用
        const root = ReactDOM.createRoot(document.getElementById('root'));
        root.render(<AnnualFortune2026 />);
    </script>
</body>
</html>